<template>
<div>
    <!-- 轮播图区域 -->
    <mt-swipe :auto="4000">
        <!-- 在组件中使用v-for循环的话，一定要使用key
            互联网上的url地址总是唯一的，不可能多个资源具有同一个名称。
        -->
        <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
            <img v-bind:src="item.img" alt="">
        </mt-swipe-item>
    </mt-swipe>
    <!-- 九宫格到六宫格的改造工程 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                <img src="../../images/menu1.png" alt="">
                <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                 <img src="../../images/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                 <img src="../../images/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                 <img src="../../images/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
    </ul>
    <h3>HomeContainer</h3>
</div> 
</template>

<script>
import { Toast } from 'mint-ui'
export default {
 data(){
     return {
         lunbotuList:[]// 保存轮播图的数组
     };
 },
 created(){
     this.getLunbotu();
 },
 methods:{
     getLunbotu(){
         this.$http.get('api/getlunbo').then(result=>{
            if(result.body.status==0){
                //成功的
                this.lunbotuList=result.body.message;
            }else{
                //失败的
               Toast("加载轮播图失败......"); 

            }
         })
     }
 }
}
</script>

<style lang="scss" scoped>
.mint-swipe{
    height:200px;
}
// .mint-swipe-item:nth-child(1){
//     background-color:red;
// }
// .mint-swipe-item:nth-child(2){
//     background-color:green;
// }
// .mint-swipe-item:nth-child(3){
//     background-color:blue;
// }
.mint-swipe-item{
    &:nth-child(1){// 写上&代表是交集选择器，否则代表的是后代选择器。
        background-color:red;
    }
    &:nth-child(2){// 写上&代表是交集选择器，否则代表的是后代选择器。
        background-color:blue;
    }
    &:nth-child(3){// 写上&代表是交集选择器，否则代表的是后代选择器。
        background-color:green;
    }
    img{
        width:100%;
        height:100%;
    }
}
   // 因为可能涉及到优先级的问题，所以使用原生的可能会更好。
    .mui-grid-view.mui-grid-9{
        background-color:#ffff;
        border:none;
        img{
            width:60px;
            height:60px;
        }
        。mui-media-body{
            font-size:13px;
        }
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border:0;
    }
</style>